<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" title="发布"></CustomNav>
		<view :style="'margin-top:'+mt" class="content">
			<view class="white-block">
				<view class="block-title FZHZGBJ">个人信息</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>姓名</view>
					<input class="form-ctrl" v-model.trim="form.name" placeholder-class="input-placeholder"
						placeholder="请输入姓名" maxlength="20" />
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>身份证号码</view>
					<input class="form-ctrl" v-model.number="form.idCard" placeholder-class="input-placeholder"
						placeholder="请输入身份证号码" maxlength="20" />
				</view>
			</view>
			<view class="white-block">
				<view class="block-title FZHZGBJ">商品信息</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>标题</view>
					<input class="form-ctrl" v-model.trim="form.title" placeholder-class="input-placeholder"
						placeholder="请输入标题名称" maxlength="20" />
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>描述</view>
					<textarea v-model="form.account" maxlength="200" class="form-ctrl full"
						placeholder-class="input-placeholder" placeholder="请输入商品描述"></textarea>
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>价格</view>
					<input v-model.number="form.price" maxlength="5" class="form-ctrl"
						placeholder-class="input-placeholder" placeholder="请输入商品价格" />
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>电话</view>
					<input v-model.number="form.phone" maxlength="5" class="form-ctrl"
						placeholder-class="input-placeholder" placeholder="请输入联系电话" />
				</view>
				<view @click="chooseLocation" class="form-item">
					<view class="form-label"><text class="require">*</text>位置</view>
					<input v-model="form.address" :disabled="true" class="form-ctrl"
						placeholder-class="input-placeholder" placeholder="请选择位置" />
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>简介（{{form.introduction.length}}/5）</view>
					<view class="tips">请简述商品具体内容…</view>
					<view class="upload-pic-ctrl">
						<view @click="viewImage('introduction',item)" class="upload-item"
							v-for="(item,index) in form.introduction" :key="index">
							<view @click.stop="deleteImage('introduction',index)" class="iconfont icon-shanchu"></view>
							<image mode="aspectFill" :src="item"></image>
						</view>
						<view class="upload-item">
							<image @click="chooseImage('introduction',5)" v-if="form.introduction.length<5"
								src="@/static/images/upload1.png">
							</image>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label"><text class="require">*</text>上传图片（{{form.swiperImage.length}}/5）</view>
					<view class="upload-pic-ctrl">
						<view @click="viewImage('swiperImage',item)" class="upload-item"
							v-for="(item,index) in form.swiperImage" :key="index">
							<view @click.stop="deleteImage('swiperImage',index)" class="iconfont icon-shanchu"></view>
							<image mode="aspectFill" :src="item"></image>
						</view>
						<view class="upload-item">
							<image @click="chooseImage('swiperImage',5)" src="@/static/images/upload1.png"
								v-if="form.swiperImage.length<5"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btn-block">
				<view @click="submit" class="btn normal">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				form: {
					id: 0,
					name: '',
					idCard: '',
					title: '',
					price: 0,
					phone: '',
					account: '',
					address: '',
					latitude: '',
					longitude: '',
					introduction: [],
					swiperImage: [],
				},
				rule: {
					name: {
						name: '姓名',
						required: true,
					},
					idCard: {
						name: '身份证号码',
						required: true,
					},
					title: {
						name: '标题',
						required: true,
					},
					price: {
						name: '价格',
						required: true,
					},
					phone: {
						name: '联系电话',
						required: true,
					},
					address: {
						name: '所在位置',
						required: true,
					},
					account: {
						name: '描述',
						required: true,
					},
					introduction: {
						name: '简介图片',
						required: true,
					},
					swiperImage: {
						name: '顶部轮播图',
						required: true,
					},
				}
			}
		},
		watch: {

		},
		methods: {
			chooseLocation() {
				uni.chooseLocation({
					latitude: this.$store.getters.position.latitude,
					longitude: this.$store.getters.position.longitude,
					success: (e) => {
						this.form.address = e.address;
						this.form.latitude = e.latitude;
						this.form.longitude = e.longitude;
					},
				})
			},
			submit() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})

				this.showToast('保存成功', () => {
					uni.$emit('refreshMine')
					uni.navigateBack()
				})
			},
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		height: 100%;
		background-image: linear-gradient(to bottom, #68C759, #F8F8F8 400px, #F8F8F8 400px, #F8F8F8);
		background-repeat: no-repeat;

		.content {
			width: $content-width;
			margin: 0 auto;

			.white-block {
				background: #fff;
				border-radius: 8px;
				padding: 30rpx;
				margin-bottom: 30rpx;

				.block-title {
					color: $theme-color;
				}

				.form-item:last-child {
					border-bottom: none;
				}

				.form-item {
					width: 100%;
					border-bottom: 1px solid #F7F7F7;
					padding-top: 30rpx;

					.tips {
						font-size: 28rpx;
						margin-top: 10rpx;
					}

					.form-label {
						font-size: 30rpx;
						color: #1A1A1A;
						margin-bottom: 10rpx;

						.require {
							color: red;
						}
					}

					.form-ctrl {
						font-size: 28rpx;
						min-height: 90rpx;
						width: 100%;
					}

					.form-ctrl.full {
						margin-top: 20rpx;
						display: block;
						height: 200rpx;
					}

					.upload-pic-ctrl {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: wrap;

						.upload-item {
							margin-bottom: 30rpx;
							width: calc((100% - 60rpx)/3);
							height: 190rpx;
							margin-right: 30rpx;
							border-radius: 8px;
							position: relative;

							.iconfont {
								position: absolute;
								right: 5px;
								top: 5px;
								color: #fff;
								font-size: 40rpx;
								text-shadow: 0 0 1px #000;
							}

							image {
								border-radius: 8px;
								width: 100%;
								height: 100%;
							}
						}

						.upload-item:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}

			.btn-block {
				display: flex;
				align-items: center;

				.btn {
					margin: 30rpx auto;
				}
			}

			.remark {
				background: #fff;
				border-radius: 8px;
				padding: 30rpx;
				margin-bottom: 30rpx;
				font-size: 28rpx;
			}
		}
	}
</style>